<template>
  <Modal v-model="isShow"
         footer-hide
         width="600"
         @on-cancel="closeEvent"
         :mask-closable="false"
         :title="title">
    <Form ref="form" :label-width="80" :disabled="type=='view'" :model="formData" :rules="rules" inline>
      <FormItem label="用户名" prop="userName">
        <Input placeholder="请输入用户名" v-model="formData.userName"/>
      </FormItem>
      <FormItem label="昵称" prop="nickName">
        <Input placeholder="请输入昵称" v-model="formData.nickName"/>
      </FormItem>
      <FormItem label="手机号" prop="phone">
        <Input placeholder="请输入手机号" v-model="formData.phone"/>
      </FormItem>
      <FormItem label="邮箱" prop="email">
        <Input placeholder="请输入邮箱" v-model="formData.email"/>
      </FormItem>
      <FormItem label="真实姓名" prop="realName">
        <Input placeholder="请输入真实姓名" v-model="formData.realName"/>
      </FormItem>
      <FormItem label="身份证号" prop="idNumber">
        <Input placeholder="请输入身份证号" v-model="formData.idNumber"/>
      </FormItem>
      <FormItem label="性别" prop="sex">
        <DictSelect v-model="formData.sex" dictCode="Sex"/>
      </FormItem>
      <FormItem label="状态" prop="accountStatus">
        <DictSelect v-model="formData.accountStatus" dictCode="AccountStatus"/>
      </FormItem>
      <FormItem label="出生日期" prop="birthDate">
        <DatePicker type="date" format="yyyy-MM-dd" placeholder="请选择出生日期" v-model="formData.birthDate"/>
      </FormItem>
      <row>
        <FormItem style="width: 95%" label="自我介绍" prop="introduction">
          <Input type="textarea" maxlength="255" show-word-limit :autosize="{minRows: 3}"
                 v-model="formData.introduction"/>
        </FormItem>
      </row>
      <row>
        <FormItem class="form-bottom-btn">
          <Button @click="submitBtnClick" type="primary">保存</Button>
        </FormItem>
      </row>
    </Form>
  </Modal>
</template>

<script>

import {Message, Row} from "view-ui-plus";
import {saveOrUpdateUser} from "@/api/sys/user";
import {RESPONSE_CODE_SUCCESS} from "@/constant/response";
import XEUtils from 'xe-utils'
import RoleList from "@/views/system/user/SysRoleList.vue";

const formData = {
  id: undefined,
  userName: '',
  nickName: '',
  phone: '',
  realName: '',
  idNumber: '',
  sex: 0,
  accountStatus: 0,
  birthDate: undefined,
  introduction: ''
}

export default {
  name: "SysUserEdit",
  components: {RoleList, Row},
  data() {
    return {
      isShow: false,
      title: "",
      type: '',
      formData: formData,
      rules: {
        userName: [
          {required: true, message: '不能为空', trigger: 'blur'},
        ],
        sex: [
          {required: true, type: 'number', message: '不能为空', trigger: 'blur'},
        ],
        accountStatus: [
          {required: true, type: 'number', message: '不能为空', trigger: 'blur'},
        ],
      }
    }
  },
  methods: {
    show({title, type, data}) {
      this.title = title
      this.type = type;
      if (!data) {
        data = {}
      }
      this.formData = this.$utils.clone(data)
      this.isShow = true
    },
    closeEvent() {
      this.formData = this.$utils.clone(formData)
    },
    submitBtnClick() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        let saveData = this.$utils.clone(this.formData)
        if (saveData.birthDate) {
          saveData.birthDate = XEUtils.toDateString(saveData.birthDate, 'yyyy-MM-dd')
        }
        saveOrUpdateUser(saveData).then(res => {
          if (res.code == RESPONSE_CODE_SUCCESS) {
            this.$emit("ok")
            Message.success("保存成功")
            this.isShow = false
          }
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
